<!-- eslint-disable vue/multi-word-component-names -->
<template>
<!-- 我的 -->
  <div>
    <div class="my">
      <div class="my-img">
        <van-image
          round
          width="100%"
          height="100%"
          :src="islogin?'https://img01.yzcdn.cn/vant/cat.jpeg':''"
        />
        <div class="myislogin" @click="islogin?getout():getgo()">
          {{ islogin?'退出登录':'点击登录' }}
        </div>
      </div>
    </div>
    <div class="kp">
      <div style="width: 300px;height:86px;" class="fk">
        <van-grid style="color:#48a737;">
          <van-grid-item icon="cart" text="待支付" />
          <van-grid-item icon="clock" text="进行中" />
          <van-grid-item icon="checked" text="已完成" />
          <van-grid-item icon="clear" text="已取消" />
        </van-grid>
      </div>
      <div class="fk" style="margin: 10px 0;">
        <van-cell is-link title="编辑收货信息" :to="islogin?'/addr':'/login'"/>
        <van-cell is-link title="查看订单" :to="islogin?'/order':'/login'"/>
      </div>
      <div class="fk">
        <van-cell :title="userinfo?userinfo.user:''" icon="manager"/>
        <van-cell :title="userinfo?userinfo.tel:''" icon="phone"/>
        <van-cell :title="userinfo?userinfo.address:''" icon="location"/>
        <van-cell title="客服" icon="service"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      islogin: false, // 判断是否登录
      userinfo: []
    }
  },

  // 接收父组件传递过来的参数
  props: {},

  components: {},

  // computed是计算属性，也就是依赖其它的属性计算所得出最后的值
  computed: {},

  // 页面初始化方法
  mounted () {
    this.getUser()
  },

  // 监听方法 click事件等 ，执行drawFeatures方法
  methods: {
    getUser () {
      this.userinfo = JSON.parse(localStorage.getItem('addr'))
      this.islogin = sessionStorage.getItem('userinfo')
    },
    getout () { // 退出登录
      sessionStorage.removeItem('userinfo')
      localStorage.removeItem('addr')
      this.getUser()
    },
    getgo () { // 点击登录
      this.$router.push('/login')
    }
  }
}

</script>
<style lang='less' scoped>
.my{
  width: 100%;
  height: 180px;
  background-color: #48a737;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5px;
}
.my-img{
  width: 60px;
  height: 60px;
  border: 5px solid white;
  margin: 10px;
  border-radius: 50%;
  box-shadow: 2px 2px 30px black;
}
.myislogin{
  width: 100px;
  margin-top: 10px;
  margin-left: -2px;
  color: white;
}
.kp{
  width: 80%;
  height: 400px;
  margin: -50px auto;
}
.fk{
  border-radius: 5px;
  overflow: hidden;
}
</style>
